<template>
  <el-container class="wrap">
    <el-header>
      <el-row>
        <el-col :span="20">
          <h1>在线拍卖系统</h1>
        </el-col>
        <el-col :span="4" class="align-right">
          <el-button type="text" @click="logout">注销</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card class="box-card">
        <h2 class="blues">拍卖品信息</h2>
        <el-form
            :model="item"
            :rules="rules"
            ref="auctionForm"
            label-width="120px"
        >
          <el-form-item label="名称：" prop="auctionName">
            <el-input v-model="item.auctionName"></el-input>
          </el-form-item>

          <el-form-item label="起拍价：" prop="auctionStartPrice">
            <el-input v-model.number="item.auctionStartPrice"></el-input>
          </el-form-item>

          <el-form-item label="底价：" prop="auctionUpset">
            <el-input v-model.number="item.auctionUpset"></el-input>
          </el-form-item>

          <el-form-item label="开始时间：" prop="auctionStartTime">
            <el-date-picker
                v-model="item.auctionStartTime"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间：" prop="auctionEndTime">
            <el-date-picker
                v-model="item.auctionEndTime"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="拍卖品图片：">
            <el-upload
                style="text-align: center"
                class="avatar-uploader"
                action="http://localhost:9090/file/upload"
                :headers="{token: item.token}"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
              <img v-if="item.auctionPic" :src="item.auctionPic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="描述：" prop="auctionDesc">
            <el-input
                type="textarea"
                v-model="item.auctionDesc"
                rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">保 存</el-button>
            <el-button >取 消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "AuctionForm",
  data() {
    return {
      item: {
        auctionName: "",
        auctionStartPrice: "",
        auctionUpset: "",
        auctionStartTime: "",
        auctionEndTime: "",
        auctionDesc: "",
        auctionPic: '',
        auctionPicType: '',
        token: '' // 确保这里初始化了 token
      },
      rules: {
        auctionName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        auctionStartPrice: [
          { required: true, message: "请输入起拍价", trigger: "blur" },
          { type: "number", message: "起拍价必须为数字", trigger: "blur" },
        ],
        auctionUpset: [
          { required: true, message: "请输入底价", trigger: "blur" },
          { type: "number", message: "底价必须为数字", trigger: "blur" },
        ],
        auctionStartTime: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
          {
            type: "string",
            message: "格式：2010-05-05 12:30:00",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入开始时间'));
              } else if (isNaN(new Date(value).getTime())) {
                callback(new Error('无效的日期格式'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        auctionEndTime: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
          {
            type: "string",
            message: "格式：2010-05-06 16:30:00",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入结束时间'));
              } else if (isNaN(new Date(value).getTime())) {
                callback(new Error('无效的日期格式'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        auctionDesc: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
    };
  },
  created() {
    this.item.auctionPicType = this.getFileExtension(this.item.auctionPic);
  },
  methods: {
    handleSubmit() {
      // 保存当前的用户信息到数据库
      this.$request.post('/insert', this.item).then(res => {
        if(res.code === '200'){
          this.$router.push('/index');
          // 更新本地存储的用户信息
          this.$message.success('添加成功');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleAvatarSuccess(response) {
      this.item.auctionPic = response.data;
      this.item.auctionPicType = this.getFileExtension(response.data);
      this.$message.success('头像上传成功');
    },
    logout() {
      localStorage.removeItem('honey-user');
      this.$router.push('/');
      this.$message.success('你已经成功注销');
    },
    getFileExtension(filePath) {
      // 使用正则表达式匹配文件后缀名
      const match = filePath.match(/\.([a-zA-Z0-9]+)$/);
      if (match && match[1]) {
        // 返回文件后缀名，不包括点
        return match[1].toLowerCase();
      }
      // 如果没有匹配到，返回 null 或其他默认值
      return null;
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  display: block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
.avatar {
  width: 100px;
  height: 100px;
}
.align-right {
  text-align: right;
}
.note {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
.blues {
  color: #409EFF;
}
</style>